<template>
  <div class="sjfx">
    <tabbar></tabbar>

    <!-- 页面标题 -->
    <div class="pageTitle">
      <p>水质量数据分析</p>
      <p>
        <img src="@/assets/sthj/img/book.png" alt="" />
        <span>水质量报告</span>
      </p>
    </div>

    <!-- 头部展示卫星图 -->

    <div class="header">
      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
      <div class="wxt">
        <!-- 高德地图 -->
        <div class="dt">
          <el-amap
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :amap-manager="amapManager"
          >
            <!-- 多边形 -->
            <el-amap-polygon
              strokeColor="#0050E7"
              strokeWeight="5"
              strokeOpacity="1"
              fillColor="#c9ebf7"
              fillOpacity="0.2"
              ref="map"
              v-for="(polygon, index) in polygons"
              :key="index"
              :path="polygon.Ce.path"
            />
            <el-amap-marker
              v-for="(item, index) in dian"
              :key="index"
              :position="item.jw"
              :events="item.events"
              :icon="dianIcon"
            />
            <!-- 信息窗体 -->
            <el-amap-info-window
              v-if="window"
              :position="window.jw"
              :visible="window.visible"
              :offset="window.offset"
              :close-when-click-map="true"
              :is-custom="true"
            >
              <div class="sy-widow col999">监测点{{ window.num }}</div>
            </el-amap-info-window>
          </el-amap>
        </div>

        <img src="@/assets/sthj/img/bzd.png" class="bzd" />
        <div class="situationList">
          <p>河流水域</p>
          <p>
            <span
              :style="{ backgroundColor: checkedAll == true ? '#12D7FF' : '' }"
              @click="unCheckedAll()"
            ></span
            >全部开启
          </p>
          <p
            v-for="(item, index) in situationList"
            :key="index"
            @click="changeCheckItem(item)"
          >
            <span
              :style="{
                backgroundColor: item.checked == true ? '#12D7FF' : '',
              }"
            ></span>
            {{ item.name }}
          </p>
        </div>
      </div>

      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
    </div>

    <!-- echart土地环境图表展示 -->
    <div class="airQuality">
      <!-- 空气质量变化趋势折线图 -->
      <div class="trend" style="width: 65%">
        <div class="trendTitle title">
          <p>各监测点水质元素含量</p>
        </div>
        <div class="content" id="trendContent"></div>
      </div>
      <div class="current" style="width: 35%">
        <div class="currentTitle title"><p>水质类别占比分析</p></div>
        <div class="content" id="currentContent"></div>
      </div>
    </div>

    <!-- 实时水质量表格 -->
    <div class="realQuality">
      <div class="title">
        <p>实时水质量</p>
        <div>
          <el-select
            v-model="trendValue"
            placeholder="请选择"
            @change="selectedChange"
          >
            <el-option
              v-for="item in trendOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="content">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="768"
          v-loading="tableLoading"
        >
          <el-table-column
            fixed="left"
            prop="surface"
            label="断面(监测点)"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="rivers" label="河流" width="120">
          </el-table-column>

          <el-table-column prop="basin" label="流域" width="120">
          </el-table-column>

          <el-table-column prop="waterTemperature" label="水温(°c)" width="120">
          </el-table-column>

          <el-table-column prop="pH" label="pH" width="120"> </el-table-column>

          <el-table-column
            prop="dissolvedOxygen"
            label="溶解氧(mg/L)"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="conductivity"
            label="电导率(uS/cm)"
            width="120"
          >
          </el-table-column>

          <el-table-column prop="turbidity" label="浊度(NTU)" width="120">
          </el-table-column>

          <el-table-column prop="turbidity" label="总磷(mg/L)" width="120">
          </el-table-column>

          <el-table-column
            fixed="right"
            prop="WaterQualityCategory"
            label="水质类别"
            width="150"
          >
          </el-table-column>
        </el-table>

        <div class="pageination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="1"
            layout="prev, pager, next,sizes"
            :total="1"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../../components/sthj/footer.vue";
import tabbar from "../../../components/sthj/tabbar.vue";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager(); //
export default {
  components: { tabbar, Footer },
  name: "HcdcpSthj",

  data() {
    return {
      selectIndex: 0,
      //河流水域列表
      situationList: [
        { name: "浈江", checked: true },
        { name: "武江", checked: false },
        { name: "新丰江", checked: false },
        { name: "滃江", checked: true },
        { name: "墨江", checked: true },
        { name: "锦江", checked: true },
        { name: "南水河", checked: true },
      ],
      checkedAll: false,
      // 水环境图表对象
      TrendChart: null, //各监测点水质元素含量图表对象
      trendOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          data: ["五级", "四级", "三级", "二级", "一级"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(233, 235, 241, 1)",
            },
          },
          axisLabel: {
            color: "rgba(102, 102, 102, 1)",
          },
          axisTick: { show: false },
          data: [
            "长坝",
            "高桥",
            "龙归",
            "古市",
            "官渡",
            "河坪",
            "凌江口",
            "判官塘",
            "政塘",
            "河南桥",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "五级",
            type: "bar",
            stack: "total",
            label: {},

            emphasis: {
              label: {
                show: true,

                fontSize: "14",
              },
            },
            itemStyle: { color: "rgba(255, 108, 64, 1)" },
            data: [320, 302, 301, 334, 390, 241, 321, 214, 254, 424],
            barWidth: "30",
          },
          {
            name: "四级",
            type: "bar",
            stack: "total",
            label: {},
            emphasis: {
              label: {
                show: true,

                fontSize: "14",
              },
            },
            itemStyle: { color: "rgba(255, 143, 109, 1)" },
            data: [120, 132, 101, 134, 90, 240, 123, 154, 124, 214],
          },
          {
            name: "三级",
            type: "bar",
            stack: "total",
            label: {},
            emphasis: {
              label: {
                show: true,

                fontSize: "14",
              },
            },
            itemStyle: { color: "rgba(255, 189, 152, 1)" },
            data: [220, 182, 191, 234, 290, 214, 321, 211, 254, 322],
          },
          {
            name: "二级",
            type: "bar",
            stack: "total",
            label: {},
            itemStyle: { color: "rgba(255, 242, 212, 1)" },
            emphasis: {
              label: {
                show: true,

                fontSize: "14",
              },
            },
            data: [150, 212, 201, 154, 190, 214, 231, 251, 261, 252],
          },
          {
            name: "一级",
            type: "bar",
            stack: "total",
            label: {},
            itemStyle: {
              color: "rgba(45, 153, 255, 1)",
              borderRadius: [55, 55, 0, 0],
            },
            emphasis: {
              label: {
                show: true,

                fontSize: "14",
              },
            },
            data: [224, 126, 251, 126, 234, 214, 236, 241, 264, 215],
          },
        ],
      },
      //水质类别占比分析图表对象
      currentChart: null,
      currentOption: {
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          trigger: "item",
          formatter:
            '<span style="color:#4AE2CB">{b}</span>\n<span style="color:rgba(255, 108, 64, 1)">{c}</span>',
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            label: {
              show: true,
              position: "inner",
              fontSize: 14,

              formatter: "{d|{d}%}\n{b|{b}}",
              rich: {
                d: {
                  lineHeight: 10,
                  fontSize: 20,
                  color: "#FFFFFF",
                },
                b: {
                  padding: [10, 12],
                  fontSize: 12,
                  color: "#FFFFFF",
                },
              },
            },
            radius: [0, 170],
            center: ["50%", "57%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 0,
            },
            data: [
              {
                value: 40,
                name: "一级水质",
                itemStyle: { color: "rgba(45, 153, 255, 1)" },
              },
              {
                value: 38,
                name: "二级水质",
                itemStyle: { color: "rgba(131, 207, 255, 1)" },
              },
              {
                value: 32,
                name: "三级水质",
                itemStyle: { color: " rgba(165, 243, 255, 1)" },
              },
              {
                value: 30,
                name: "四级水质",
                itemStyle: { color: "rgba(192, 242, 220, 1)" },
              },
              {
                value: 28,
                name: "五级水质",
                itemStyle: { color: "rgba(96, 241, 200, 1)" },
                label: { padding: [10, 30, 0, 0] },
              },
              {
                value: 26,
                name: "六级水质",
                itemStyle: { color: "rgba(44, 217, 197, 1)" },
              },
            ],
          },
        ],
      },
      //实时水质量下拉框
      trendOptions: [
        {
          value: "2020-09-09",
          label: "2020-09-09",
        },
        {
          value: "2020-09-10",
          label: "2020-09-11",
        },
        {
          value: "2020-09-12",
          label: "2020-09-12",
        },
        {
          value: "2020-09-13",
          label: "2020-09-13",
        },
        {
          value: "2020-09-14",
          label: "2020-09-14",
        },
      ],
      trendValue: "2020-09-09",
      //实时水质量表格数据
      tableData: [
        {
          surface: "长坝",
          rivers: "浈江",
          basin: "珠江流域",
          waterTemperature: "31.2",
          pH: "7.46",
          dissolvedOxygen: "3.18", //溶解氧
          conductivity: "848.3", //电导率
          turbidity: "38.6", //浊度
          TotalPhosphorus: "0.221", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "武江",
          basin: "珠江流域",
          waterTemperature: "30.2",
          pH: "7.46",
          dissolvedOxygen: "5.99", //溶解氧
          conductivity: "948.3", //电导率
          turbidity: "38.6", //浊度
          TotalPhosphorus: "0.291", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "新丰江",
          basin: "珠江流域",
          waterTemperature: "33.2",
          pH: "8.46",
          dissolvedOxygen: "5.23", //溶解氧
          conductivity: "928.3", //电导率
          turbidity: "32.6", //浊度
          TotalPhosphorus: "0.191", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "滃江",
          basin: "珠江流域",
          waterTemperature: "34.2",
          pH: "6.46",
          dissolvedOxygen: "4.11", //溶解氧
          conductivity: "968.3", //电导率
          turbidity: "31.6", //浊度
          TotalPhosphorus: "0.291", //总磷
          WaterQualityCategory: "二级",
        },
        {
          surface: "长坝",
          rivers: "墨江",
          basin: "珠江流域",
          waterTemperature: "35.2",
          pH: "7.46",
          dissolvedOxygen: "4.46", //溶解氧
          conductivity: "748.5", //电导率
          turbidity: "41.6", //浊度
          TotalPhosphorus: "0.301", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "锦江",
          basin: "珠江流域",
          waterTemperature: "40.2",
          pH: "7.46",
          dissolvedOxygen: "3.22", //溶解氧
          conductivity: "688.4", //电导率
          turbidity: "40.6", //浊度
          TotalPhosphorus: "0.300", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "南水河",
          basin: "珠江流域",
          waterTemperature: "37.2",
          pH: "4.46",
          dissolvedOxygen: "5.37", //溶解氧
          conductivity: "778.2", //电导率
          turbidity: "33.1", //浊度
          TotalPhosphorus: "0.231", //总磷
          WaterQualityCategory: "三级",
        },
        {
          surface: "长坝",
          rivers: "浈江",
          basin: "珠江流域",
          waterTemperature: "31.2",
          pH: "7.46",
          dissolvedOxygen: "3.18", //溶解氧
          conductivity: "848.3", //电导率
          turbidity: "38.6", //浊度
          TotalPhosphorus: "0.221", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "武江",
          basin: "珠江流域",
          waterTemperature: "30.2",
          pH: "7.46",
          dissolvedOxygen: "5.99", //溶解氧
          conductivity: "948.3", //电导率
          turbidity: "38.6", //浊度
          TotalPhosphorus: "0.291", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "新丰江",
          basin: "珠江流域",
          waterTemperature: "33.2",
          pH: "8.46",
          dissolvedOxygen: "5.23", //溶解氧
          conductivity: "928.3", //电导率
          turbidity: "32.6", //浊度
          TotalPhosphorus: "0.191", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "滃江",
          basin: "珠江流域",
          waterTemperature: "34.2",
          pH: "6.46",
          dissolvedOxygen: "4.11", //溶解氧
          conductivity: "968.3", //电导率
          turbidity: "31.6", //浊度
          TotalPhosphorus: "0.291", //总磷
          WaterQualityCategory: "二级",
        },
        {
          surface: "长坝",
          rivers: "墨江",
          basin: "珠江流域",
          waterTemperature: "35.2",
          pH: "7.46",
          dissolvedOxygen: "4.46", //溶解氧
          conductivity: "748.5", //电导率
          turbidity: "41.6", //浊度
          TotalPhosphorus: "0.301", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "锦江",
          basin: "珠江流域",
          waterTemperature: "40.2",
          pH: "7.46",
          dissolvedOxygen: "3.22", //溶解氧
          conductivity: "688.4", //电导率
          turbidity: "40.6", //浊度
          TotalPhosphorus: "0.300", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "南水河",
          basin: "珠江流域",
          waterTemperature: "37.2",
          pH: "4.46",
          dissolvedOxygen: "5.37", //溶解氧
          conductivity: "778.2", //电导率
          turbidity: "33.1", //浊度
          TotalPhosphorus: "0.231", //总磷
          WaterQualityCategory: "三级",
        },
        {
          surface: "长坝",
          rivers: "滃江",
          basin: "珠江流域",
          waterTemperature: "34.2",
          pH: "6.46",
          dissolvedOxygen: "4.11", //溶解氧
          conductivity: "968.3", //电导率
          turbidity: "31.6", //浊度
          TotalPhosphorus: "0.291", //总磷
          WaterQualityCategory: "二级",
        },
        {
          surface: "长坝",
          rivers: "墨江",
          basin: "珠江流域",
          waterTemperature: "35.2",
          pH: "7.46",
          dissolvedOxygen: "4.46", //溶解氧
          conductivity: "748.5", //电导率
          turbidity: "41.6", //浊度
          TotalPhosphorus: "0.301", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "武江",
          basin: "珠江流域",
          waterTemperature: "30.2",
          pH: "7.46",
          dissolvedOxygen: "5.99", //溶解氧
          conductivity: "948.3", //电导率
          turbidity: "38.6", //浊度
          TotalPhosphorus: "0.291", //总磷
          WaterQualityCategory: "一级",
        },
        {
          surface: "长坝",
          rivers: "新丰江",
          basin: "珠江流域",
          waterTemperature: "33.2",
          pH: "8.46",
          dissolvedOxygen: "5.23", //溶解氧
          conductivity: "928.3", //电导率
          turbidity: "32.6", //浊度
          TotalPhosphorus: "0.191", //总磷
          WaterQualityCategory: "一级",
        },
      ],
      tableLoading: false,
      timer: null,
      // 高德
      amapManager,
      zoom: 10,
      center: [114.364022, 25.190073],
      plugin: [
        {
          pName: "MapType",
          defaultType: 1,
        },
      ],
      // 画行政区
      district: null,
      polygons: [],
      dian: [],
      dianIcon: require("../../../assets/sthj/img/blue.png"),
      // 信息窗体
      windows: [],
      window: {
        num: 1,
        jw: [114.156566, 25.297585],
        offset: [5, -30],
        visible: true,
      },
      one: [
        [114.147154, 25.297859],
        [114.173525, 25.285035],
        [114.173976, 25.268173],
        [114.185273, 25.26665],
        [114.192982, 25.244774],
        [114.204046, 25.239735],
        [114.213393, 25.241217],
        [114.225899, 25.237456],
        [114.224672, 25.224998],
        [114.25449, 25.216231],
        [114.271554, 25.195277],
        [114.29195, 25.178219],
        [114.297368, 25.167975],
        [114.319952, 25.164567],
        [114.327087, 25.154632],
        [114.321862, 25.140346],
        [114.302336, 25.111788],
      ],
      two: [
        [114.389863, 25.263286],
        [114.400945, 25.241335],
        [114.411808, 25.23688],
        [114.41752, 25.22466],
        [114.422475, 25.223435],
        [114.423236, 25.215058],
        [114.42743, 25.211961],
        [114.426034, 25.201572],
        [114.427384, 25.190872],
        [114.432292, 25.188711],
        [114.43308, 25.181735],
        [114.439806, 25.176792],
        [114.441039, 25.169829],
        [114.449139, 25.165041],
        [114.455038, 25.161446],
        [114.45496, 25.156763],
        [114.46089, 25.154565],
        [114.456434, 25.149105],
        [114.457382, 25.146802],
        [114.460047, 25.146829],
        [114.466414, 25.154088],
        [114.471572, 25.1489],
        [114.475095, 25.148714],
        [114.47673, 25.150548],
      ],
      three: [
        [114.440533, 25.294221],
        [114.443663, 25.287331],
        [114.4454, 25.282955],
        [114.444905, 25.277958],
        [114.447973, 25.268536],
        [114.450965, 25.265571],
        [114.456361, 25.265245],
        [114.467207, 25.251413],
        [114.469412, 25.242478],
        [114.471887, 25.242125],
        [114.474191, 25.238045],
        [114.481009, 25.232622],
        [114.478901, 25.223783],
        [114.478766, 25.205235],
        [114.468228, 25.198446],
        [114.468452, 25.186818],
        [114.459122, 25.182713],
        [114.454942, 25.17519],
      ],
    };
  },
  watch: {
    situationList: {
      //监听的对象
      deep: true, //深度监听设置为 true
      handler: function (newV) {
        console.log(newV);
        let num = newV.find((item) => {
          console.log(item);
          return item.checked == false;
        });
        console.log(num);
        if (num) {
          this.checkedAll = false;
        } else {
          this.checkedAll = true;
        }
      },
    },
  },
  mounted() {
    this.initCurrent();
    this.initTrend();
    this.$nextTick(() => {
      setTimeout(() => {
        this.line(this.one, "#0C8BCC");
        this.line(this.two, "#50C4FF");
        this.line(this.three, "#1D53E9 ");
        this.drawBounds();
        this.point();
      }, 1000);
    });
  },

  methods: {
    // 画行政区
    drawBounds() {
      let that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        let opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      that.district.search("南雄市", (status, result) => {
        that.polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              path: bounds[i],
            });
            that.polygons.push(polygon);
          }
        }
        AMap.Polygon.bind(that.polygons);
        // that.$refs.map.$amap.setFitView(that.polygons); //视口自适应
      });
    },
    // 河流水域选中和取消选中
    unCheckedAll() {
      this.checkedAll = !this.checkedAll;
      if (this.checkedAll == true) {
        this.situationList.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.situationList.forEach((item) => {
          item.checked = false;
        });
      }
    },

    changeCheckItem(item) {
      item.checked = !item.checked;
    },

    //各监测点水质元素含量
    initTrend() {
      this.TrendChart = this.$echarts.init(
        document.getElementById("trendContent")
      );

      this.TrendChart.setOption(this.trendOption);
    },
    //水质类别占比分析饼状图
    initCurrent() {
      this.currentChart = this.$echarts.init(
        document.getElementById("currentContent")
      );

      this.currentChart.setOption(this.currentOption);
    },
    //当页码改变时重新请求数据
    handleCurrentChange() {
      this.tableLoading = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableLoading = false;
      }, 800);
    },
    //点击实时水环境资源下拉框触发事件
    selectedChange() {
      this.tableLoading = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableLoading = false;
      }, 800);
    },
    point() {
      let markers = [];
      let windows = [];
      let that = this;
      let pointMarker = [
        {
          jw: [114.156566, 25.297585],
          num: 1,
        },
        {
          jw: [114.192272, 25.256024],
          num: 2,
        },
        {
          jw: [114.286034, 25.11732],
          num: 3,
        },
        {
          jw: [114.389775, 25.26333],
          num: 4,
        },
        {
          jw: [114.440599, 25.294688],
          num: 5,
        },
        {
          jw: [114.449422, 25.164085],
          num: 6,
        },
        {
          jw: [114.449422, 25.164085],
          num: 7,
        },
      ];
      pointMarker.forEach((item, index) => {
        markers.push({
          jw: item.jw,
          num: item.num,
          events: {
            mouseover() {
              that.windows.forEach((window) => {
                window.visible = false; //关闭窗体
              });
              that.window = that.windows[index];
              console.log(that.window);
              that.$nextTick(() => {
                that.window.visible = true; //点击点坐标，出现信息窗体
              });
            },
          },
        });
        windows.push({
          jw: item.jw,
          num: item.num,
          offset: [5, -30],
          visible: false, //初始是否显示
        });
      });
      //  加点
      this.dian = markers;
      //加弹窗
      this.windows = windows;
    },
    line(path, color) {
      const map = amapManager.getMap();
      let polyline = new AMap.Polyline({
        path,
        isOutline: true,
        outlineColor: color,
        borderWeight: 2,
        strokeColor: color,
        strokeOpacity: 1,
        strokeWeight: 2,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50,
      });

      polyline.setMap(map);
      // 缩放地图到合适的视野级别
      map.setFitView([polyline]);
    },
  },
};
</script>

<style lang="less" scoped>
.sy-widow {
  padding: 0 16px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #cef3ff;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
}
.dt {
  width: 1200px;
  height: 560px;
}
.sjfx {
  width: 100%;
  height: auto !important;
  background-color: #fafafa;
}

//页面标题
.pageTitle {
  width: 1200px;
  margin: 20px auto;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  p:nth-child(1) {
    height: 100%;
    font-size: 32px;
    font-family: PangMenZhengDao;
    color: #333333;
    line-height: 50px;
  }
  p:nth-child(2) {
    min-width: 280px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    text-align: center;
    line-height: 50px;
    img {
      width: 21px;
      height: 26.5px;
      vertical-align: middle;
      margin: 0 10px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}

//头部卫星图展示

.selectActive {
  color: rgba(255, 255, 255, 1) !important;
  background: url("../../../assets/sthj/img/xxk.png");
}
.header {
  width: 1920px;
  height: 552px;
  display: flex;
  justify-content: center;
  img {
    height: 100%;
  }
  .wxt {
    width: 1200px;
    height: 100%;
    margin: 0 11px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .bzd {
      position: absolute;
      width: 150px;
      height: 10px;
      top: -10px;
      left: 20px;
    }
    .situationList {
      width: 140px;
      height: auto;
      background: rgba(0, 0, 0, 0.6);
      position: absolute;
      top: 0px;
      left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      padding-bottom: 30px;
      p:nth-child(1) {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff !important;
      }
      p {
        margin: 12px 20px;
        color: white;
        display: flex;
        align-items: center;
        opacity: 1;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 2px;
          border: 1px solid #ffffff;
          margin-right: 12px;
          cursor: pointer;
        }
        img {
          vertical-align: middle;
          width: 12px;
          height: 18px;
          margin: 0 16px 0px 8px;
        }
      }
    }
  }
}

//echarts水环境图表展示
.airQuality {
  width: 1200px;
  height: 450px;
  background: #ffffff;
  transform: translateX(10px);
  margin: 0 auto;
  display: flex;
}
.airQuality > div {
  height: 100%;
  padding: 20px;
  .title {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 2px solid #e9e9e9 !important;
    padding: 0px 24px;
    margin-bottom: 24px !important;
  }
  .content {
    width: 100%;
    height: 325px;
    margin-bottom: 24px !important;
  }
}

//实时水质量表格
.realQuality {
  width: 1200px;
  margin: 24px auto !important;
  background: #ffffff;
  transform: translateX(10px);
  padding: 30px;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px !important;
    p {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    div {
      width: 200px;
    }
  }
  .content {
    width: 100%;
  }
  /deep/.el-table__body {
    width: 100% !important;
  }
  /deep/.el-table__header {
    width: 100% !important;
  }
  /deep/.el-table th,
  .el-table tr {
    background-color: #eeeeee !important;
    text-align: center;
  }
  /deep/.el-table--enable-row-transition .el-table__body td {
    text-align: center;
  }
  .pageination {
    width: 100%;
    margin-top: 63px;
    display: flex;
    justify-content: center;
  }
}
</style>